import { useState, useEffect } from "react";

// 获取鼠标位置，自定义hooks
function useMouse() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  // 鼠标事件处理
  const mouseEventHandler = (e: MouseEvent) => {
    setX(e.clientX);
    setY(e.clientY);
  };

  useEffect(() => {
    // 监听鼠标事件
    window.addEventListener("mousemove", mouseEventHandler);

    //组件销毁时，一定要解绑DOM事件（不解绑，可能出现内存泄露问题）
    return () => {
      // 解绑鼠标事件，与绑定时参数相同
      window.removeEventListener("mousemove", mouseEventHandler);
    };
  }, []);

  return { x, y };
}

export default useMouse;
